<!DOCTYPE HTML>
<html>
<head>
  <title>Test for :hover</title>
  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
  <style type="text/css">

  div#one { height: 10px; width: 10px; }
  div#one:hover { background: #00f; }
  div#one > div { height: 5px; width: 20px; }
  div#one > div:hover { background: #f00; }

  div#twoparent { overflow: hidden; height: 20px; }
  div#two { width: 10px; height: 10px; }
  div#two:hover { margin-left: 5px; background: #0f0; }
  div#two + iframe { width: 50px; height: 10px; }
  div#two:hover + iframe { width: 100px; }

  </style>
</head>
<!-- need a set timeout because we need things to start after painting suppression ends -->
<body onload="setTimeout(step1, 0)">
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
<div id="display" style="position: absolute; top: 0; left: 0; width: 300px; height: 300px">

  <div id="one"><div></div></div>

  <div id="twoparent">
    <div id="two"></div>
    <iframe id="twoi" src="hover_empty.html"></iframe>
    <div style="width: 5000px; height: 10px;"></div>
  </div>

</div>
<pre id="test">
<script type="application/javascript">

var imports = [ "SimpleTest", "is", "isnot", "ok" ];
for (var name of imports) {
    window[name] = window.opener.wrappedJSObject[name];
}

var div = document.getElementById("display");
var divtwo = document.getElementById("two");
var iframe = document.getElementById("twoi");
var divtwoparent = document.getElementById("twoparent");

iframe.contentDocument.open();
iframe.contentDocument.write("<style type='text/css'>html, body { margin: 0; padding: 0; }<\/style><body>");
iframe.contentDocument.close();

var moveEvent = { type: "mousemove", clickCount: "0" };

function setResize(str) {
  var handler = function() {
    iframe.contentWindow.removeEventListener("resize", arguments.callee, false);
    setTimeout(str, 100);
  };
  iframe.contentWindow.addEventListener("resize", handler, false);
}

function step1() {
    /** test basic hover **/
    var divone = document.getElementById("one");
    synthesizeMouse(divone, 5, 7, moveEvent, window);
    is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)",
       ":hover applies");
    is(getComputedStyle(divone.firstChild, "").backgroundColor, "transparent",
       ":hover does not apply");
    synthesizeMouse(divone, 5, 2, moveEvent, window);
    is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)",
       ":hover applies hierarchically");
    is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgb(255, 0, 0)",
       ":hover applies");
    synthesizeMouse(divone, 15, 7, moveEvent, window);
    is(getComputedStyle(divone, "").backgroundColor, "transparent",
       ":hover does not apply");
    is(getComputedStyle(divone.firstChild, "").backgroundColor, "transparent",
       ":hover does not apply");
    synthesizeMouse(divone, 15, 2, moveEvent, window);
    is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)",
       ":hover applies hierarchically");
    is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgb(255, 0, 0)",
       ":hover applies");

    /** Test for Bug 302561 **/
    setResize("step2();");
    is(iframe.contentDocument.body.offsetWidth, 50,
       ":hover does not apply (iframe body width)");
    synthesizeMouse(divtwoparent, 7, 5, moveEvent, window);
    is(iframe.contentDocument.body.offsetWidth, 100,
       ":hover applies (iframe body width)");
}

var step2called = false;
function step2() {
    is(step2called, false, "step2 called only once");
    step2called = true;
    is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
       ":hover applies");
    is(iframe.contentDocument.body.offsetWidth, 100,
       ":hover applies (iframe body width)");
    setResize("step3()");
    synthesizeMouse(divtwoparent, 2, 5, moveEvent, window);
    is(iframe.contentDocument.body.offsetWidth, 50,
       ":hover does not apply (iframe body width)");
}

var step3called = false;
function step3() {
    is(step3called, false, "step3 called only once");
    step3called = true;
    if (getComputedStyle(iframe, "").width == "100px") {
        // The two resize events may be coalesced into a single one.
        step4();
        return;
    }
    is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
       ":hover does not apply");
    setResize("step4()");
    /* expect to get a second resize from the oscillation */
}

var step4called = false;
function step4() {
    is(step4called, false, "step4 called only once (more than two cycles of oscillation)");
    if (step4called)
        return;
    step4called = true;
    is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
       ":hover applies");
    setTimeout(step5, 500); // time to detect oscillations if they exist
}

var step5called = false;
function step5() {
    is(step5called, false, "step5 called only once");
    step5called = true;
    setResize("step6()");
    synthesizeMouse(divtwoparent, 25, 5, moveEvent, window);
}

var step6called = false;
function step6() {
    is(step6called, false, "step6 called only once");
    step6called = true;
    is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
       ":hover does not apply");
    synthesizeMouse(divtwoparent, 2, 5, moveEvent, window);
    setTimeout(step7, 500); // time to detect oscillations if they exist
}

var step7called = false;
function step7() {
    is(step7called, false, "step7 called only once (more than two cycles of oscillation)");
    if (step7called)
        return;
    step7called = true;
    is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
       ":hover does not apply");
    setTimeout(step8, 500); // time to detect oscillations if they exist
}

/* test the same case with scrolltop */

var step8called = false;
function step8() {
    is(step8called, false, "step8 called only once");
    step8called = true;
    iframe.contentDocument.body.removeAttribute("onresize");
    /* move the mouse out of the way */
    synthesizeMouse(divtwoparent, 200, 5, moveEvent, window);
    divtwoparent.scrollLeft = 5;
    setResize("step9()");
    synthesizeMouse(divtwoparent, 2, 5, moveEvent, window);
    /* mouse now over 7, 5 */
}

var step9called = false;
function step9() {
    is(step9called, false, "step9 called only once");
    step9called = true;
    is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
       ":hover applies");
    setResize("step10()");
    divtwoparent.scrollLeft = 0; /* mouse now over 2,5 */
}

var step10called = false;
function step10() {
    is(step10called, false, "step10 called only once");
    step10called = true;
    if (getComputedStyle(iframe, "").width == "100px") {
        // The two resize events may be coalesced into a single one.
        step11();
        return;
    }
    is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
       ":hover does not apply");
    setResize("step11()");
    /* expect to get a second resize from the oscillation */
}

var step11called = false;
function step11() {
    is(step11called, false, "step11 called only once (more than two cycles of oscillation)");
    if (step11called)
        return;
    step11called = true;
    is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
       ":hover applies");
    setTimeout(step12, 500); // time to detect oscillations if they exist
}

var step12called = false;
function step12() {
    is(step12called, false, "step12 called only once");
    step12called = true;
    setResize("step13()");
    divtwoparent.scrollLeft = 25; /* mouse now over 27,5 */
}

var step13called = false;
function step13() {
    is(step13called, false, "step13 called only once");
    step13called = true;
    is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
       ":hover does not apply");
    setResize("step14()");
    divtwoparent.scrollLeft = 0; /* mouse now over 2,5 */
}

var step14called = false;
function step14() {
    is(step14called, false, "step14 called only once");
    step14called = true;
    if (getComputedStyle(iframe, "").width == "50px") {
        // The two resize events may be coalesced into a single one.
        step15();
        return;
    }
    is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
       ":hover applies");
    setResize("step15()");
    /* expect to get a second resize from the oscillation */
}

var step15called = false;
function step15() {
    is(step15called, false, "step15 called only once (more than two cycles of oscillation)");
    if (step15called)
        return;
    step15called = true;
    is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
       ":hover does not apply");
    setTimeout(finish, 500); // time to detect oscillations if they exist
}

function finish() {
    document.getElementById("display").style.display = "none";

    var tester = window.SimpleTest;
    window.close();
    tester.finish();
}

</script>
</pre>
</body>
</html>
